<template>
  <section class="m-section" :class="classes">
    <slot></slot>
  </section>
</template>

<script>
export default {
  componentName: 'MSection',
  props: {
    borderTop: {
      type: Boolean,
      default: true
    },
    borderBottom: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    classes () {
      let result = []
      if (this.borderTop) {
        result.push('m-section-border-top')
      }
      if (this.borderBottom) {
        result.push('m-section-border-bottom')
      }
      return result
    }
  }
}
</script>

<style lang="scss">
  $var : 0.2rem;
  .m-section{
    background:#fff;
    &-border{
      &-top{
        border-top: $var solid $color-background-base
      }
      &-bottom{
        border-bottom: $var solid $color-background-base
      }
      &-bottom+&-top{
        margin-top: -$var;
      }
    }
  }
</style>
